<template>
	<view>
		<view class="login-container" v-if="!token">
			<!-- 提示登录的图标 -->
			<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>
			<!-- 登录按钮 -->
			<!-- 可以从 @getuserinfo 事件处理函数的形参中，获取到用户的基本信息 -->
			<button type="primary" class="btn-login"  @click="getUserInfo">一键登录</button>
			<!-- 登录提示 -->
			<view class="tips-text">登录后尽享更多权益</view>
		</view>
		<myuserinfo v-else></myuserinfo>
		<zdy-tabbar :current-page="2"></zdy-tabbar>
	</view>
</template>

<script>
	import { mapMutations } from 'vuex'
	import { mapState } from 'vuex'
	import myuserinfo from './my-userinfo'
	export default {
		components:{
			myuserinfo
		},
		computed: {
		    // 将 m_user 模块中的 userinfo 映射到当前页面中使用
		    ...mapState('m_user', ['token']),
		  },
		data() {
			return {

			};
		},
		methods: {
			// 2. 调用 mapMutations 辅助方法，把 m_user 模块中的 updateUserInfo 映射到当前组件中使用
			    ...mapMutations('m_user', ['updateUserInfo','updateToken']),
			getUserInfo(){
				const that =this
			    uni.getUserProfile({
			        desc:'Wexin', // 这个参数是必须的
			        success:res=>{
						// 将用户的基本信息存储到 vuex 中
						console.log(res)
						// 获取登录成功后的 Token 字符串
						  this.getToken(res)
			        },
			        fail:err=>{
						// 判断是否获取用户信息成功
						if (err.errMsg === 'getUserProfile:fail auth deny') return uni.$showMsg('您取消了登录授权！')
			        }
					
			    })
			},
			// 调用登录接口，换取永久的 token
			async getToken(info) {
			  // 调用微信登录接口
			  const [err, res] = await uni.login().catch(err => err)
			  // 判断是否 uni.login() 调用失败
			  if (err || res.errMsg !== 'login:ok') return uni.$showError('登录失败！')
			
			  // 准备参数对象
			  const query = {
			    code: res.code,
			    encryptedData: info.encryptedData,
			    iv: info.iv,
			    rawData: info.rawData,
			    signature: info.signature
			  }
				//显示消息提示框
				uni.showLoading({
					mask: true,
					title:"授权登陆中"
				})
			  // 换取 token
			  const { data: loginResult } = await uni.$http.post('/api/project/v1/users/wxlogin', query)
			  if (loginResult.status !== 200) return uni.$showMsg('登录失败！')
			  console.log(loginResult)
			  this.updateUserInfo(loginResult.data[0])
			  uni.hideLoading();
			  uni.$showMsg('登录成功')
			  this.updateToken(loginResult.data[0].openid)
			  // setTimeout(function(){
				 //  uni.redirectTo({
					//   url:'./My_zx/My_zx'
				 //  })
			  // },1000)
			  
			}
			
		},


	}
</script>

<style lang="scss">
	.login-container {
		// 登录盒子的样式
		height: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		position: relative;
		overflow: hidden;


		// 登录按钮的样式
		.btn-login {
			width: 90%;
			border-radius: 100px;
			margin: 15px 0;
			background-color: #c00000;
		}

		// 按钮下方提示消息的样式
		.tips-text {
			font-size: 12px;
			color: gray;
		}
	}
</style>
